window.addEventListener("DOMContentLoaded", function() {
	
	
	let headerFixedDiv = document.getElementById("header-fixed-div");
	////();
	fixedDiv();
	function fixedDiv() {
		let ss = document.documentElement.scrollTop;
		// 当窗口滚动距离为header盒子区域的高度时，则显示隐藏的输入框，固定定位
		if(ss > (headerFixedDiv.parentElement.offsetHeight + headerFixedDiv.parentElement.offsetTop)) {
			headerFixedDiv.style.zIndex = "9000";
			headerFixedDiv.style.opacity = "1";
			return;
		}
		headerFixedDiv.style.zIndex = "";
		headerFixedDiv.style.opacity = "";
	}
	/*// 整个页面字体大小与页面适配调整函数
	function //() {
		document.documentElement.style.fontSize = (10000 / (document.documentElement.clientWidth)) + "vw";
		
	}
	*/
	jQuery.noConflict();
	jQuery(function($) {
		
		// 点击某个li，就让页面滚动到对应的games-column区块位置
		$(".games-li").click(function() {
			try{
				$("html").stop(true).animate(
					{
						scrollTop: $(".games-column").eq($(this).index()).offset().top
					},
					"slow",
					"swing"
				);
			}catch(err){
				alert(err.message);
			}
			
			
		});
		// 滚动到某个元素高度处的函数
		function clickScrollTo(flag = false, obj, destinationY, times = "slow", linear = "swing") {
			try{
				obj.click(function() {
					if(flag) {
						if($("html").scrollTop() <= 0) {
							destinationY = $("html").get(0).offsetHeight;
							
						}
						
					}
					$("html").stop(true).animate(
						{
							scrollTop: parseFloat(destinationY)
						},
						times,
						linear
					);
					console.dir($("html").scrollTop());
				});
				
			}catch(e){
				//TODO handle the exception
			}
			
		}
		$("#scroll-to-top-span").click(function() {
			history.back();
		})
		//clickScrollTo(true, $("#games-header-list"), $("body").scrollTop());
		$(window).on("scroll", function() {
			
			// 隐藏的固定定位的搜索框结合窗口滚动事件
			fixedDiv();
			
		});
		$(window).resize(function() {
			// 当窗口宽度window.innerWidth发生变化时,要保证分辨率始终是基本不变的
			// 因为涉及文字大小的设置，与盒子宽度的设置
			// 而且调整字体大小，实现适配，不用绑定滚动事件，否则会出现难看的闪屏效果bug
			//();
			
		});
		
		// 以下是轮播图动画函数区域，translateCarouselAnimation
		let carouselUL1 = $("#carousel-ul1").children();
		let carouselCircleUL = $(".carousel-circle-ul");
		carouselUL1.each(function(i, ele) {
			carouselCircleUL.append($(`<li>${(i+1)}</li>`));

		});
		transformCarousel($("#nav-games-area2"), carouselUL1, carouselCircleUL);
		// 下面这个函数因为使用到了jQuery语法,选择器,所以要放在jQuery加载环境中,不能写在jQuery.ready()之外
		function transformCarousel(obj1Father, obj1, obj2, startIndex = 0, event1 = "mouseover", event2 = "mouseleave") {
			try {
				if(obj1 && obj2) {
					// 如果这两个对象存在，则进行下一步的轮播图操作
					obj1.set01 = null;
					obj1.zeroIndex01 = startIndex;
					obj1.flag01 = true;
					obj1.len = obj1.length; // 最先开始进行轮播图的第一个元素的下标，0为从第一个元素开始
					clearInterval(obj1.set01); // 节流阀作用
					obj2.children().on("mouseover", function() {
						obj1.flag01 = false;
						obj1.zeroIndex01 = $(this).index();
						carousel01(obj1, obj2, obj1.zeroIndex01);
						console.log(obj1.zeroIndex01);
					});
					obj1.set01 = setInterval(function() {
						if(obj1.flag01) {
							carousel01(obj1, obj2, obj1.zeroIndex01);
							obj1.zeroIndex01++;
							if(obj1.zeroIndex01 === obj1.len) {
								obj1.zeroIndex01 = 0;
							}
							return;
						}
						console.dir("gogogo123  " + obj1.flag01);

					}, 3000);
					// 当鼠标悬浮于某个元素之上时，一般为父元素上，则暂时停止轮播图
					obj1Father.on(event1 + " click mouseenter", function(e) {
						obj1.flag01 = false;
						console.log(e.type);
						return;
					});
					obj1Father.on(event2 + " mouseout", function(e) {
						obj1.flag01 = true;
						console.log(e.type);
						return;
					});
					
					return;
				}
				throw new Error("这个对象不存在，请保证获取的是正确的对象。");
			} catch(err) {
				alert(err.message);
			}
		}
		
		// 轮播图的又一个封装函数
		function carousel01(obj1, obj2, zeroIndex01) {
			obj1.eq(zeroIndex01)
			.css({
				"transform": "translate(0, 0)",
				"opacity": "1"
			})
			.siblings()
			.css({
				"transform": "",
				"opacity": "0"
			});
			obj2.children().eq(zeroIndex01)
			.css({
				"background-color": "#ffffcc",
				"color": "#0494fd",
				"border": "2px solid #d37468"
			})
			.siblings()
			.css({
				"background-color": "",
				"color": "",
				"border": ""
			});
		}
	});
	function docVisibilityChange(flag) {
		if(document.hidden) {
			// 页面隐藏时, document.hidden=true
			flag = false;
			console.log(123);
			return;
		}
		// 页面显示时, document.hidden=false
		flag = true;
		console.log(456);
	
	}
});

